<template>
    <div class="wrapper">
        <div class="list">
            <empty v-if="!addressList.length"></empty>

            <div class="item" v-for="item in addressList" :key="item.id">
                <div class="ttt">
                    <div class="left">
                        <div class="top">
                            <span>{{ item.receiveName }}</span>
                            <span class="phone">{{ item.receiveTelephone }}</span>
                        </div>
                        <div class="bottom">{{ item.receiveAddress }}</div>
                    </div>
                    <div class="right" @click="addressDetail(item)">
                        <img src="@/assets/no.png" alt="" />
                    </div>
                </div>
                <div class="bbb">
                    <div class="left">
                        <div v-if="item.defaultFlag === 'Y'">
                            <img src="@/assets/chooseBgred.png" alt="" />
                            <span style="color: #66d6ff">已设默认</span>
                        </div>
                        <div v-else @click="defaultFlagClick(item)">
                            <img src="@/assets/noBg.png" alt="" />
                            <span>设为默认</span>
                        </div>
                    </div>
                    <div class="right" @click="choose(item)">选择此地址</div>
                </div>
            </div>
        </div>
        <div class="addBtn">
            <div class="btn" @click="addAddress">
                <img src="@/assets/add.png" alt="" />
                <span>添加收货地址</span>
            </div>
        </div>
        <van-popup v-model:show="show" closeable round>
            <div class="addressWrapper">
                <div class="title">添加收货地址</div>
                <div class="content">
                    <van-cell-group inset>
                        <van-field label-width="3em" v-model="addInfo.receiveName" label="姓名" placeholder="请输入姓名" />
                        <van-field v-model="addInfo.receiveTelephone" label-width="3em" label="电话" placeholder="请输入电话" />
                        <van-field v-model="addInfo.receiveAddress" label="地址" label-width="3em" placeholder="请输入地址" />
                    </van-cell-group>
                    <div class="btn" @click="addInfoClick">添 加</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { showToast, showSuccessToast } from 'vant'
import { addresses, editAddress, setDetailAddress, delAddr } from '@/api/orderPos'
import { showConfirmDialog } from 'vant'

export default defineComponent({
    name: 'addressList',
    setup() {
        const store = useStore()
        const router = useRouter()
        const show = ref(false)
        const state = reactive({
            addressList: {}, // 地址信息列表
            addInfo: {}
        })

        const choose = item => {
            console.log(item)
            store.dispatch('posOrder/GetAddress', item)
            router.back()
        }
        const getAddress = () => {
            // 获取收货人地址列表
            addresses().then(res => {
                state.addressList = [...res.object]
                show.value = false
            })
        }
        getAddress()
        const defaultFlagClick = item => {
            showConfirmDialog({
                title: '设置默认地址',
                message: '确定将当前地址设置为默认地址吗?',
                confirmButtonColor: '#66d6ff'
            })
                .then(() => {
                    setDetailAddress({ id: item.id }).then(res => {
                        showSuccessToast('设置成功')
                        getAddress()
                    })
                })
                .catch(() => {
                    // on cancel
                })
        }
        const addressDetail = item => {
            showConfirmDialog({
                title: '删除地址',
                message: '确定删除当前地址吗?',
                confirmButtonColor: '#66d6ff'
            })
                .then(() => {
                    delAddr({ id: item.id }).then(res => {
                        showSuccessToast('删除成功')
                        getAddress()
                    })
                })
                .catch(() => {
                    // on cancel
                })
        }
        const addAddress = () => {
            show.value = true
        }
        const addInfoClick = () => {
            if (!state.addInfo.receiveName) {
                showToast('请输入收货人姓名')
                return
            }
            if (!/^1[23456789]\d{9}$/.test(state.addInfo.receiveTelephone)) {
                showToast('手机号码有误，请重填')
                return
            }
            if (!state.addInfo.receiveAddress) {
                showToast('请输入收货地址')
                return
            }
            editAddress(state.addInfo).then(res => {
                state.addInfo = {}
                showSuccessToast('添加成功')
                getAddress()
            })
        }
        return {
            ...toRefs(state),
            show,
            addressDetail,
            defaultFlagClick,
            choose,
            addAddress,
            addInfoClick
        }
    }
})
</script>

<style lang="scss" scoped>
.wrapper {
    padding: 10px;
    box-sizing: border-box;
    .list {
        .item {
            margin-bottom: 10px;
            background: #ffffff;
            opacity: 1;
            padding: 0 10px;
            border-radius: 6px;
            .ttt {
                display: flex;
                border-bottom: 1px solid #f5f5f5;
                padding: 13px 7px;
                .left {
                    flex: 1;
                    .top {
                        .phone {
                            color: #545454;
                            margin-left: 10px;
                        }
                    }
                    .bottom {
                        margin-top: 10px;
                        color: #545454;
                        line-height: 20px;
                    }
                }
                .right {
                    img {
                        width: 18px;
                    }
                }
            }
            .bbb {
                display: flex;
                padding: 13px 0;
                align-items: center;
                justify-content: space-between;
                .left {
                    div {
                        display: flex;
                        align-items: center;
                    }
                    img {
                        width: 16px;
                    }
                    span {
                        margin-left: 10px;
                    }
                }
                .right {
                    border: 1px solid #66d6ff;
                    opacity: 1;
                    border-radius: 4px;
                    padding: 5px 10px;
                    color: #66d6ff;
                }
            }
        }
    }
    .addBtn {
        padding: 0 30px;
        opacity: 1;
        height: 40px;
        opacity: 1;
        .btn {
            background: #66d6ff;
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            img {
                width: 16px;
            }
            span {
                color: #ffffff;
                margin-left: 10px;
            }
        }
    }
    .addressWrapper {
        background: #ffffff;
        opacity: 1;
        padding: 20px 20px 0 20px;
        border-radius: 10px;
        .title {
            text-align: center;
            font-size: 16px;
        }
        .content {
            padding-top: 20px;
            .btn {
                width: 240px;
                height: 40px;
                margin: 20px auto;
                background: #66d6ff;
                opacity: 1;
                border-radius: 6px;
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>
